<?php
session_start();
if(empty($_SESSION['user'])){
    echo "<a href = \"http://www.qq.com/qq.html\">请先登录！</a>";
}else{
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天界面</title>
    <link href="qq.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">
    <div id="top_menu">
        <label>欢迎 <?php echo $_SESSION['user'] ?> 来到聊天室！</label>
        <label id="info">个人资料编辑</label>
        <label id="out">退出</label>
    </div>
</div>
<div class="display">
    <div class="userlist">
        <div class="userlist_count">
            <label>在线人数：3 人</label>
        </div>
        <div class="userlist_info">
            <div class="online">
                在线用户列表
            </div>
        </div>
    </div>
    <div class="historytext">
        <div id="historytext_history"></div>
        <label id="message"></label>
    </div>
    <div class="inputtext">
        <form method="post" action="inputtext.php" id="myform">
            <textarea id="textinfo"></textarea>
            <label id="button">发送</label>
        </form>
    </div>

</div>
<script type="text/javascript">
    var d = new Date();
    var str = d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
    var username = "<?php echo $_SESSION['user'] ?>";
    var outelement = document.getElementById('out');
    var infoelement = document.getElementById('info');
    var buttonelement = document.getElementById('button');
    var formelement = document.getElementById('myform');
    var messageelement = document.getElementById('message');
    var textareaelement = document.getElementById('textinfo');
    var historyelement = document.getElementById('historytext_history');
    buttonelement.onclick = function () {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var result = JSON.parse(this.responseText);
                    if (result.error == 1) {
                        messageelement.innerHTML = result.message;
                    } else {
                        messageelement.innerHTML ="发送成功！";

                        setInterval(display,1000);
                        setTimeout(function () {
                            messageelement.innerHTML = '';
                        },500);
                        textareaelement.value = '';
                    }
                }else{
                    alert('出现错误，请联系管理员');
                }
            }
        };

        xhr.open(formelement.method,formelement.action);
        var data = new FormData();
        data.append('username',username);
        data.append('textarea',textareaelement.value);
        xhr.send(data);

    };





     var display = function () {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var result = JSON.parse(this.responseText);
                    historyelement.innerHTML='';
                    for(var i =0;i < result.message.length;i++){
                        var new_element = document.createElement('div');
                        if(result.message[i].name == '<?php echo $_SESSION['user'] ?>'){
                            new_element.setAttribute('class','right');
                            new_element.innerHTML =result.message[i].text+":"+result.message[i].name+"<br>"+result.message[i].time;
                            historyelement.appendChild(new_element);
                        }else{
                            new_element.setAttribute('class','left');
                            new_element.innerHTML =  result.message[i].name+":"+result.message[i].text+"<br>"+result.message[i].time;
                            historyelement.appendChild(new_element);

                        }
                    }
                }else{
                    alert('出现错误，请联系管理员');
                }
            }
        };
        xhr.open('POST','display.php');
        xhr.send();
    };



    outelement.onclick = function () {
        location.href = 'session_destroy.php';
    };
    infoelement.onclick = function () {
        location.href = 'info.php';
    }
</script>
</body>
</html>
<?php } ?> 